<template>
    <ul class="artist wrapfix">
        <li v-for="dt in lists" :key="dt.artistId">
            <a @click="goDetail(dt)">
                <div class="cancelBtn" v-if="type==1" @click.stop="cancelFollow(dt)">取消关注</div>
                <div class="imgbox">
                    <Image v-if="dt.backgroundUrl" :url="dt.backgroundUrl"/>
                </div>
                <div class="avater">
                    <Image v-if="dt.headUrl" :url="dt.headUrl"/>
                </div>
                <div class="txtBox">
                    <h5><span>{{dt.nick}}</span></h5>
                    <p>{{dt.fansNumber}} 粉丝</p>
                </div>
            </a>
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import {toast} from '@/utils/common'
export default {
    props:{
        lists:Array,
        type:Number
    },
    components:{
        Image,
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        const cancelFollow = async (item)=>{
            const res = await store.dispatch('arApi/cancel_follow',{artistId: item.artistId})
            if(res.success){
                context.emit('refreshData')
            }
        }
        const goDetail = (o)=>{
            router.push(`/artist/${o.artistId}`)
        }

        return{
            ...toRefs(state),
            cancelFollow,
            goDetail
        }
    }
}
</script>

<style lang="scss" scoped>
    .artist{
        overflow: hidden;
        padding: 0;
        li{
            float: left;
            width: 50%;
            padding:0 0 30px 0;
            &:nth-child(2n){
                padding-left:15px;
            }
            &:nth-child(2n+1){
                padding-right:15px;
            }
            a{
                display: block;
                position: relative;
                z-index: 10;
                width: 100%;
                height: 460px;
                color: #fff;
                .imgbox{
                    width: 100%;
                    height: 280px;
                }
                .txtBox{
                    height: 180px;
                    background: rgba(14, 97, 97, 0.7);
                    text-align: center;
                    h5{
                        font-size: 30px;
                        font-weight: normal;
                        padding: 66px 0 0 0;
                        overflow: hidden;
                        span{
                            display: block;
                            height: 48px;
                            line-height: 48px;
                            overflow: hidden;
                            width: 100%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                        }
                    }
                    p{
                        font-size: 28px;
                        color: #84A7A7;
                    }
                }
                .avater{
                    position: absolute;
                    z-index: 10;
                    top: 224px;
                    left: 50%;
                    margin: 0 0 0 -55px;
                    width: 110px;
                    height: 110px;
                    overflow: hidden;
                    border-radius: 50%;
                }
                .cancelBtn{
                    position: absolute;
                    z-index: 10;
                    right: 20px;
                    top: 20px;
                    min-width: 140px;
                    height: 50px;
                    line-height: 50px;
                    background: #0E6161;
                    border-radius: 32px;
                    padding: 0 20px;
                    font-weight: bold;
                    font-size: 24px;
                }
            }
        }
    }
</style>